<template>
  <view class="normal-login-container">
    <view class="logo-content align-center justify-center flex">
      <image style="width: 100rpx;height: 100rpx;" :src="globalConfig.appInfo.logo" mode="widthFix"/>
      <text class="title">账号注册</text>
    </view>
    <uni-forms ref="form" :modelValue="loginForm" :rules="rules" label-width="0" label-align="right" class="login-form-content">
      <uni-forms-item name="mobile">
        <view class="input-item flex align-center">
          <view class="iconfont icon-user icon"></view>
          <input v-model="loginForm.mobile" type="number" :disabled="isDisabledMobileInput" class="input" placeholder="请输入手机号" maxlength="11"/>
        </view>
      </uni-forms-item>
      <uni-forms-item name="smscode" style="margin-bottom: 18rpx;">
        <view class="input-item flex align-center">
          <view class="iconfont icon-code icon"></view>
          <input v-model="loginForm.smscode" type="number" class="input" placeholder="请输入验证码" maxlength="6"/>
          <text @click="getSMSCode(1)" class="login-code" v-show="btnShow">获取验证码</text>
          <text class="login-code text-primary" style="width: 140rpx;" v-show="!btnShow">{{ counter }}</text>
        </view>
        <view class="sounds-text" @click="getSMSCode(101)">收不到短信？使用语音验证码</view>
      </uni-forms-item>
      <uni-forms-item name="password">
        <view class="input-item flex align-center">
          <view class="iconfont icon-password icon"></view>
          <input v-model="loginForm.password" type="password" class="input" placeholder="请输入登录密码"/>
        </view>
      </uni-forms-item>
      <uni-forms-item name="rePassword" style="margin-bottom: 0;">
        <view class="input-item flex align-center">
          <view class="iconfont icon-password icon"></view>
          <input v-model="loginForm.rePassword" type="password" class="input" placeholder="请再次输入登录密码"/>
        </view>
      </uni-forms-item>
      <view class="login-txt">已有账号？<span class="text-primary" @click="login">立即登录</span></view>

    </uni-forms>


    <view class="xieyi text-center">
      <text class="text-grey1">注册即代表您已同意</text>
      <text @click="handleUserAgrement" class="text-primary">《用户使用协议》</text>
      <text @click="handlePrivacy" class="text-primary">《用户隐私协议》</text>
    </view>
    <button @click="register" class="login-btn cu-btn block bg-blue lg round" style="background-color: #00a660;">注册
    </button>
    <confirmRegister ref="confirmRegisterDialog"></confirmRegister>
    <!--滑块验证弹出-->
    <slider-verify :show="verifyShow" :do-action="doAction" @success="touchSliderResult" @close="onClose"></slider-verify>
  </view>
</template>

<script>
	import {
		register,
		resetPassWord
	} from '@/api/login';
	import {
		getCode
	} from '@/utils/sendSmsCode'
	import confirmRegister from "./confirmRegister"
  import SliderVerify from "../components/slider-verify/slider-verify";
	export default {
		mixins: [getCode],
		components:{SliderVerify, confirmRegister},
		data() {
			return {
				globalConfig: getApp().globalData.config,
				isDisabledMobileInput: false,
        loginForm: {
					mobile: "",
					password: "",
					smscode: "",
          smsType: "",
					uuid: "",
					rePassword: "",
					shareReg: "",
				},
				counter: "获取短信验证码",
				rules: {
					mobile: {
						rules: [{
								required: true,
								errorMessage: "请输入您的手机号",
								trigger: "change"
							},
							{
								min: 11,
								max: 11,
								trigger: "change",
								message: "手机号长度必须是11位",
							},
							{
								min: 11,
								max: 11,
								trigger: "blur",
								message: "手机号长度必须是11位",
							},
						]
					},
					smscode: {
						rules: [{
							required: true,
							errorMessage: "请输入验证码",
							trigger: "change"
						}, ]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: "请输入您的密码",
						}, ]
					},
					rePassword: {
						rules: [{
							required: true,
							errorMessage: "请再次输入您的密码",
						}, ]
					},
				},
			}
		},
		onLoad(option) {
			// 若存在手机号参数 则锁定手机号输入框
			if (!!option.mobile) {
				this.isDisabledMobileInput = true;
				this.loginForm.mobile = option.mobile;
			}
		},
		methods: {
			// 注册
			register() {
        // 检测异常操作
        if (this.sliderVerifyAddVerifyNumber()) {
          return;
        }
				this.$refs.form.validate().then((res) => {
					uni.showLoading({
						title: "注册中"
					})
					// 若带mobile参 说明已有账号 进行验证码重置 否则正常注册
					if (!this.isDisabledMobileInput) {
						register(this.loginForm).then((res) => {
							uni.hideLoading()
							this.$modal.msgSuccess("注册成功")
							setTimeout(() => {
								this.$tab.navigateTo('/pages/login')
							}, 500)
						});
					}

					// mobile 传参
					if (this.isDisabledMobileInput) {
						resetPassWord(this.loginForm).then((res) => {
							uni.hideLoading()
							this.$modal.msgSuccess("注册成功")
							setTimeout(() => {
								this.$tab.navigateTo('/pages/login')
							}, 500)
						});
					}
				})
			},
			login() {
				this.$tab.navigateTo('/pages/login')
			},
      // 获取验证码
      getSMSCode(type) {
        // 直接唤起验证弹窗
        this.verifyShow = true;
        this.doAction = "this.getCode(this.loginForm.mobile, this.loginForm.smsType)";
        this.loginForm.smsType = type
      },
			// 隐私协议
			handlePrivacy() {
				this.$tab.navigateTo('/pages/common/policy/privacyPolicy')
			},
			// 用户协议 
			handleUserAgrement() {
				this.$tab.navigateTo('/pages/common/policy/userAgreement')
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: $uni-bg-color;
	}

	.sounds-text {
		text-align: right;
		margin-top: 6rpx;
		color: #777;
		font-size: 26rpx;
	}

	::v-deep .uni-forms-item__label {
		padding: 0;
	}

	::v-deep .uni-forms-item .is-required {
		display: none;
	}

	.login-txt {
		text-align: right;
		margin-top: 6rpx;
	}

	.sms-input ::v-deep.is-input-border {
		background: #f5f6f7 !important;
		width: 95%;
		border: none;
		padding-left: 14rpx;
	}

	.text-primary {
		color: $uni-color-primary;
	}

	.gray-row {
		color: #777;
		margin: 15rpx 0;
		font-size: 26rpx;
	}

	.marginLeft {
		margin: 0 10px;
		vertical-align: middle;
	}

	.normal-login-container {
		width: 100%;

		.logo-content {
			width: 100%;
			font-size: 21px;
			text-align: center;
			padding-top: 25%;

			image {
				border-radius: 4px;
			}

			.title {
				margin-left: 10px;
			}
		}

		.login-form-content {
			text-align: center;
			margin: 0 auto;
			margin-top: 15%;
			width: 80%;

			.input-item {
				background-color: #f5f6f7;
				height: 90rpx;
				border-radius: 40rpx;

				.icon {
					font-size: 38rpx;
					margin-left: 20rpx;
					color: #999;
				}

				.input {
					width: 100%;
					font-size: 28rpx;
					line-height: 40rpx;
					text-align: left;
					padding-left: 30rpx;
				}

			}



		}

		.easyinput {
			width: 100%;
		}
	}

	.login-btn {
		width: 80%;
		margin: 10rpx auto 0;
		height: 90rpx;
		font-size: 34rpx;
	}

	.login-code {
		width: 360rpx;
		color: $uni-color-primary;
	}

	.xieyi {
		color: #333;
		margin-top: 80rpx;
		font-size: 26rpx;

	}
</style>